/**
 * @file Workbenches.tsx
 * @description 工作台页面组件，展示用户的作品数据概览、作品列表和推荐模板
 * @module Workbenches
 */

import React, { useEffect, useState } from "react";
import styles from "./style.module.css";
// 导入子组件
import WorkList from "./components/WorkList";
import DataOverview from "./components/DataOverview";
import FeaturedTemplates from "./components/FeaturedTemplates";
// 导入API和类型定义
import { getPublishData, getWorkList, PublishData, WorkItem } from "../../../api/workbench";

/**
 * 工作台页面组件
 * @component
 * @description 整合展示用户的作品数据概览、作品列表和推荐模板的主页面组件
 * @returns {JSX.Element} 工作台页面组件
 */
const Workbenches: React.FC = () => {
  /**
   * 状态管理
   * @state {PublishData} publishData - 发布数据状态，包含下载量、创建数和收藏数
   * @state {WorkItem[]} workList - 作品列表数据状态
   * @state {boolean} loading - 加载状态标识
   */
  const [publishData, setPublishData] = useState<PublishData>({
    downloads: 0,  // 下载量
    created: 0,    // 创建数
    collected: 0,  // 收藏数
  });
  const [workList, setWorkList] = useState<WorkItem[]>([]);
  const [loading, setLoading] = useState(true);

  /**
   * 副作用钩子：页面加载时获取数据
   * @effect
   * @description 组件挂载时并行获取发布数据和作品列表数据
   */
  useEffect(() => {
    /**
     * 获取页面所需数据
     * @async
     * @function fetchData
     * @description 并行请求发布数据和作品列表数据
     */
    const fetchData = async () => {
      try {
        // 使用 Promise.all 并行请求数据
        const [publishResult, workListResult] = await Promise.all([
          getPublishData(),
          getWorkList()
        ]);
        // 更新状态
        setPublishData(publishResult);
        setWorkList(workListResult);
      } catch (error) {
        console.error('获取数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // 加载状态展示
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div className={styles.container}>
      {/* 数据概览组件：展示发布数据统计 */}
      <DataOverview publishData={publishData} />
      {/* 作品列表组件：展示用户的作品 */}
      <WorkList works={workList} />
      {/* 推荐模板组件：展示精选模板 */}
      <FeaturedTemplates />
    </div> 
  );
};

export default Workbenches;
